import React, { useMemo } from 'react';
import type { UISchema } from 'gantd/lib/schema-form';
import { SchemaForm } from 'gantd';
import { spanCalculate } from '@/utils/utils';
import type { CustomComponent } from '../../interface';
import { transferSchema } from './util';
import styles from './index.less';

const defaultUiSchema: UISchema = {
  'ui:padding': '0 10px',
  'form:gutter': 15,
  'field:col': 4,
  'field:labelCol': {
    xs: 24,
    sm: 24,
    md: 24,
    lg: 24,
    xl: 24,
    xxl: 24,
  },
  'field:wrapperCol': {
    xs: 24,
    sm: 24,
    md: 24,
    lg: 24,
    xl: 24,
    xxl: 24,
  },
};

interface FormProps {
  onValuesChange: () => void;
  formRef: any;
  customComponents: CustomComponent[];
  uiSchema: UISchema;
  schema: any;
  width: number;
  formNodeRef: { current: any };
  searchKey: string;
  formKey: string | number;
}

export default function Form(props: FormProps) {
  const {
    onValuesChange,
    formRef,
    customComponents = [],
    uiSchema,
    schema,
    width,
    formNodeRef,
    searchKey,
    formKey,
  } = props;

  // 转化为SchemaForm的标准格式
  const schema_ = useMemo(() => {
    return transferSchema(schema);
  }, [schema]);

  // 根据width换算栅格占位格数
  const dynamicUiSchema = useMemo(() => {
    return { 'field:col': spanCalculate(width) };
  }, [width]);

  // 最终schema
  const finallUiSchema = useMemo(() => {
    return {
      ...defaultUiSchema,
      ...dynamicUiSchema,
      ...uiSchema,
    };
  }, [dynamicUiSchema, uiSchema]);

  // 自定义字段
  const customFileds = useMemo(() => {
    return customComponents.map((item) => ({
      type: item?.name,
      component: item?.component,
    }));
  }, [customComponents]);

  return (
    <div className={styles.searchform} ref={formNodeRef}>
      <SchemaForm
        schema={schema_}
        wrappedComponentRef={formRef}
        uiSchema={finallUiSchema}
        onChange={onValuesChange}
        customFields={customFileds}
        formKey={searchKey} // 	formKey（表单实例标识）, 整个 SchemaForm 组件实例
        key={formKey} // key（表单项标识）, 单个表单项（如 input、select 等
      />
    </div>
  );
}
